<template>
    <div class="todayRecommend">
        <div class="today">
            <img src="@/assets/images/bingbing.jpeg" alt="">
            <a href="#">个性电台</a>
        </div>
        <div class="today">
            <img src="@/assets/images/bingbing.jpeg" alt="">
            <a href="#">每日30首</a>
        </div>
        <div class="today">
            <img src="@/assets/images/bingbing.jpeg" alt="">
            <a href="#">杜比他专区</a>
        </div>
        <div class="today">
            <img src="@/assets/images/bingbing.jpeg" alt="">
            <a href="#">杜比他专区</a>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.todayRecommend {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 20px;
    align-items: center;
    justify-items: center;
    margin-bottom: 20px;

    .today {
        width: 180px;
        height: 180px;
        border-radius: 10px;
        // background-color: black;
        position: relative;
        margin-top: 10px;
        background-color: var(--imgColor);
        margin-bottom: 40px;


        img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            position: relative;
            cursor: pointer;

            &:hover {
                transition: all 1s linear;

            }
        }

        a {
            width: 100px;
            color: rgb(41, 41, 41);
            position: absolute;
            bottom: -30px;
            left: 0;

            &:hover {
                color: rgba(101, 99, 99, 0.833);
            }
        }
    }
}
</style>